<template>
  <div class="list">
    <page-content
      :contentTableConfig="contentTableConfig"
      pageName="make/list"
      ref="pageContentRef"
      @editBtnClick="handleeditClick"
      :Edshow="Edshow"
      :isSelect="isSelect"
      :selectOptions="selectOptions"
      :isSelectOne="isSelectOne"
      :select-options-one="selectOptionsOne"
      :is-select-time="isSelectTime"
      :isCreate="isCreate"
      @newBtnClick="upDateBtnClick"
    >
      <template #classify="scope">
        <el-button plain size="mini" type="success">
          <template v-if="scope.row.classify === 1"> 幼儿园 </template>
          <template v-if="scope.row.classify === 2"> 小学组 </template>
          <template v-if="scope.row.classify === 3"> 中学组 </template>
        </el-button>
      </template>
      <template #isLeave="scope">
        <el-button plain size="mini" type="success">
          <template v-if="scope.row.isLeave === 0"> 未审核 </template>
          <template v-if="scope.row.isLeave === 1"> 同意 </template>
          <template v-if="scope.row.isLeave === 2"> 不同意 </template>
        </el-button>
      </template>
    </page-content>
    <page-modal
      pageName="make/list"
      :modalConfig="modalConfig"
      modalName="审核"
      :default-info="defaultInfo"
      ref="refPageModal"
    ></page-modal>
    <el-dialog
      title="上传文件"
      :close-on-click-modal="false"
      v-model="uploadFile"
      width="500px"
    >
      <el-upload
        class="upload-demo"
        action="/admin/make/file/upload"
        :on-change="handleChange"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
        :on-progress="uploadProcess"
        :file-list="fileList"
        :on-error="handleError"
        accept=".xlsx"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, onUnmounted, reactive, ref } from 'vue'
import { contentTableConfig } from './congif/content.config'
import PageContent from '@/components/page-content'
import usePageModal from '@/hooks/use-page-modal'
import PageModal from '@/components/page-modal'
import { modalConfig } from './congif/modal.config'
import cache from '@/utils/cache'
import { ElMessage } from 'element-plus'

export default defineComponent({
  components: { PageContent, PageModal },
  name: 'list',
  setup() {
    const [refPageModal, defaultInfo, handleNewClick, handleeditClick] =
      usePageModal()
    const Edshow = ref(true)
    const isSelect = ref(true)
    const isSelectOne = ref(true)
    const isSelectTime = ref(true)
    const isCreate = ref(true)
    let uploadFile = ref(false)
    const selectOptions = reactive([
      {
        value: 0,
        label: '课程列表'
      },
      {
        value: 1,
        label: '开课列表'
      }
    ])
    const selectOptionsOne = reactive([
      {
        value: 1,
        label: '幼儿组'
      },
      {
        value: 2,
        label: '小学组'
      },
      {
        value: 3,
        label: '初中组'
      }
    ])
    const upDateBtnClick = () => {
      uploadFile.value = true
      console.log('test')
    }
    let fileList = reactive([])

    // 上传前校验
    const beforeUpload = (file: any) => {
      console.log('上传前端校验', file.size)
      const isLt10M = file.size / 1024 / 1024 < 20
      if (!isLt10M) {
        ElMessage.error('文件不能大于20MB')
        return false
      }
    }

    //上传成功回调
    const handleSuccess = (res: any, file: any, fileListnew: any) => {
      if (res.status == 200) {
        setTimeout(() => {
          alert('上传成功')
          uploadFile.value = false
          location.reload()
        }, 1500)
      } else {
        file.status = 'error'
        file.name = `上传失败：${res.msg} `
        fileList = fileListnew
      }
    }

    //上传文件
    const handleChange = async (file: any, fileList: any) => {
      fileList = fileList.slice(-3)
    }

    // 上传时候的钩子
    const uploadProcess = (event: any, file: any, fileList: any) => {
      console.log('')
    }
    //上传失败
    const handleError = (error: Error) => {
      console.log(error)
    }
    onUnmounted(() => {
      cache.deleteCache('Selectvalue')
    })
    return {
      contentTableConfig,
      modalConfig,
      refPageModal,
      defaultInfo,
      handleNewClick,
      handleeditClick,
      Edshow,
      isSelect,
      selectOptions,
      isSelectOne,
      selectOptionsOne,
      isSelectTime,
      isCreate,
      upDateBtnClick,
      uploadFile,
      handleChange,
      beforeUpload,
      fileList,
      handleSuccess,
      uploadProcess,
      handleError
    }
  }
})
</script>

<style scoped></style>
